<template>
	<view style="padding: 20rpx;">
		<u-sticky>
			<!-- 选择框 -->
			<u-search :show-action="true" placeholder="搜索美食" v-model="value" margin="0" @search="search(value)" @custom="search(value)"></u-search>
			
		</u-sticky>
		<view class="" v-for="(item,index) in food" :key="index" style="width: 100%;">
			<view class="" style="display: flex;padding: 20rpx;" @click="details(item)">
				<view class="" style="flex: 1;width: 300rpx;">
					<image :lazy-load="true" :src="item.img" mode="" style="width: 300rpx;height: 200rpx;border-radius: 20rpx;"></image>
				</view>
				<view class="" style="flex: 2;padding-left: 20rpx;font-size: 30rpx;">
					<view style="color: #0285ff;font-weight: bold;">{{item.title}}</view> 
					<view class="u-line-2">{{item.text}}</view> 
					<u-rate :count="count" v-model="item.score"></u-rate>{{item.score}}
					<view style="color: #8F8F94;"><u-icon name="chat"></u-icon>评论：{{item.comment}}条</view> 
					<!-- <view style="color: #FA3534;font-weight: bold;">￥{{item.price}}元起</view> -->
				</view>
			</view>
			
		</view>
		<u-divider>没有啦</u-divider>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				foods:[],
				count:5,
				food:[]
			}
		},
		methods: {
			search(value){
				this.food=this.foods.filter(x=>
					// console.log(this.seachlist)
					x.title.includes(value)
					
				)
			},
		},
		mounted() {
			uni.request({
			  url: "http://127.0.0.1:4523/m1/1653531-0-default/info",
			  success: (res) => {
				this.foods=res.data.data[0].food
				this.food=this.foods
				// console.log(this.food)
			  },
			  fail: (err) => {
			    // console.error(err,11111111111);
			  },
			});
			
		},
	}
</script>

<style>

</style>
